<template>
  <div id="dynamic-component-demo" class="demo">
    <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">
        {{ tab }}
    </button>
    <component v-bind:is="currentTabComponent" class="tab"></component>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import tabhome from './TabHome.vue'
import tabposts from './TabPosts.vue'
import tabarchive from './TabArchive.vue'

export default {
    components: {
        tabhome,
        tabposts,
        tabarchive
    },
    setup () {
        const state = reactive({
            currentTab: 'Home',
            tabs: ['Home', 'Posts', 'Archive'],
        })
        const currentTabComponent = computed(() => {
            return 'tab' + state.currentTab.toLowerCase()
        })
        return {
            ...toRefs(state),
            currentTabComponent,
            tabhome,
            tabposts,
            tabarchive
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #f5d1d1;
}
.tab-button.active {
  background: #e0e0e0;
}
.demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
